<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello vue</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 宿主对象 -->
    <div id="app">
        <div class="box" ref="box">
            <div class="left" :class="{'left-reset':isReset}">
                <div class="resize" title="收缩侧边栏"></div>
                <left-box></left-box>
                <div class="resizeBtn" :class="{'resizeBtn-reset':isReset}" @click="isReset=!isReset"><i class="el-icon-arrow-right" v-if="isReset"></i><i class="el-icon-arrow-left" v-else></i></div>
            </div>

            <div class="mid" :class="{'mid-reset':isReset}">
                <!--右侧div内容-->
            </div>


            <right-box></right-box>
        </div>

    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://lib.baomitu.com/pdf.js/2.7.570/pdf.js"></script>
    <script src="./components/leftBox.js"></script>
    <script src="./components/rightBox.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    isReset: false,
                    rightShow: true
                }
            },
            methods: {
                dragControllerDiv: function() {
                    var resize = document.getElementsByClassName('resize');
                    var left = document.getElementsByClassName('left');
                    var mid = document.getElementsByClassName('mid');
                    var box = document.getElementsByClassName('box');
                    for (let i = 0; i < resize.length; i++) {
                        // 鼠标按下事件
                        resize[i].onmousedown = function(e) {
                            //颜色改变提醒
                            resize[i].style.background = '#818181';
                            var startX = e.clientX;
                            resize[i].left = resize[i].offsetLeft;
                            // 鼠标拖动事件
                            document.onmousemove = function(e) {
                                var endX = e.clientX;
                                var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
                                var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

                                if (moveLen < 50) moveLen = 50; // 左边区域的最小宽度为50px
                                if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px

                                resize[i].style.left = moveLen; // 设置左侧区域的宽度

                                for (let j = 0; j < left.length; j++) {
                                    left[j].style.width = moveLen + 'px';
                                    mid[j].style.width = (box[i].clientWidth - moveLen) + 'px';
                                }
                            };
                            // 鼠标松开事件
                            document.onmouseup = function(evt) {
                                //颜色恢复
                                resize[i].style.background = '#d6d6d6';
                                document.onmousemove = null;
                                document.onmouseup = null;
                                resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
                            };
                            resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
                            return false;
                        };
                    }
                },
                // tab(){
                //     console.log(1)
                // }
            },
            mounted() {
                this.dragControllerDiv()
            }
        })
    </script>
</body>

</html>